<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17 疫情防控三分化分百度引擎</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=3LiphISVhEplmviL7E7ChfaaBkPW7EGp"></script>
    <script src="../lib/jQuery/jquery-3.6.0.js"></script>
    <script src='../lib/gcoord.js'></script>
    <script src='js/mockData.js'></script>
    <script src='js/equipmentMapUtil.js'></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #all-map {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<table>
    <tr>
        <td>城市：</td>
        <td><input id='cityId' type='text' value='杭州'/></td>
        <td>小区：</td>
        <td><input type="text" value="富力西溪悦墅" id="areaId"></td>
        <td>
            <button id='showBtn'>显示</button>
        </td>
    </tr>
</table>
<div id='all-map'></div>
<script>

    const METER = 400;

    $(document).ready(() => {
        let map = new BMap.Map('all-map');
        const centerPoint = new BMap.Point(120.025359, 30.290321);
        map.centerAndZoom(centerPoint, 15);

        map.enableScrollWheelZoom(true);
        map.clearOverlays();

        let geoc = new BMap.Geocoder();
        map.addEventListener('click', evt => {
            geoc.getLocation(evt.point, rs => {
                console.log(rs);
            });
        });

        /*let formatPoints = [];

        formatPoints = parseGeo(roadData).points.map(item => {
            return item.split(';');
        }).map(item => {
            return item.map(point => {
                return gcoord.transform([Number(point.split(',')[0]), Number(point.split(',')[1])], gcoord.BD09MC, gcoord.BD09);
            });
        });

        const points = formatPoints.map(list => {
            return list.map(item => {
                return new BMap.Point(item[0], item[1]);
            });
        });*/

        // points.forEach(list => {
        //     /*list.forEach(point => {
        //         const marker = new BMap.Marker(point);
        //         map.addOverlay(marker);
        //     });*/
        //     const polyline = new BMap.Polyline(list, {
        //         stroke: 'blue',
        //         strokeWeight: 10,
        //         strokeOpacity: 0.5
        //     });
        //     map.addOverlay(polyline);
        // });

        /**
         * 北方向道路名称
         * @param x
         * @param y
         * @param cb
         */
        const getStreetNameOfNorth = (x, y, cb) => {
            geoc.getLocation(getPoint(x, y, gcoord), res => {
                if (res.addressComponents.street.length > 0) {
                    cb(res.addressComponents.street);
                } else {
                    getStreetNameOfNorth(x, y - 100, cb);
                }
            });
        };

        /**
         * 南方向道路名称
         * @param x
         * @param y
         * @param cb
         */
        const getStreetNameOfSouth = (x, y, cb) => {
            geoc.getLocation(getPoint(x, y, gcoord), res => {
                if (res.addressComponents.street.length > 0) {
                    cb(res.addressComponents.street);
                } else {
                    getStreetNameOfSouth(x, y + 100, cb);
                }
            });
        };

        const getStreetNameOfWest = (x, y, cb) => {
            geoc.getLocation(getPoint(x, y, gcoord), res => {
                if (res.addressComponents.street.length > 0) {
                    cb(res.addressComponents.street);
                } else {
                    getStreetNameOfWest(x + 100, y, cb);
                }
            });
        };

        const getStreetNameOfEast = (x, y, cb) => {
            geoc.getLocation(getPoint(x, y, gcoord), res => {
                if (res.addressComponents.street.length > 0) {
                    cb(res.addressComponents.street);
                } else {
                    getStreetNameOfEast(x - 100, y, cb);
                }
            });
        };

        /**
         * 绘制区域
         * @param {string} city 城市名
         * @param {string} house 小区名
         */
        let showArea = function (city, house) {
            const params = {
                house,
                city,
                ak: '3LiphISVhEplmviL7E7ChfaaBkPW7EGp'
            };

            queryHouse(params, ({message, results}) => {
                if (message === 'ok') {
                    let houses = results;
                    if (houses && houses.length > 0) {
                        let house = houses[0];
                        queryHouseOutline(house.uid, function (houseOutline) {
                            const geo = houseOutline.content.geo;
                            if (!geo) {
                                let location = house.location;
                                let point = new BMap.Point(location.lng, location.lat);
                                map.centerAndZoom(point, 19);
                                let marker = new BMap.Marker(point);
                                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                                map.addOverlay(marker);
                            } else {
                                let geoObj = parseGeo(geo);
                                const {x, y} = getCenterCoordinate(geoObj.points);

                                const {north, south, west, east} = getDirections({x, y}, METER, gcoord);
                                // console.log(north);
                                getStreetNameOfNorth(x, y + METER, name => {
                                    console.log('North:', name);
                                    // drawRoadMethod(name);
                                });

                                getStreetNameOfSouth(x, y - METER, name => {
                                    console.log('South:', name);
                                    // drawRoadMethod(name);
                                });

                                getStreetNameOfWest(x - METER, y, name => {
                                    console.log('West:', name);
                                    drawRoadMethod(name);
                                });

                                getStreetNameOfEast(x + METER, y, name => {
                                    console.log('East:', name);
                                    // drawRoadMethod('勤知路');
                                });

                                /* geoc.getLocation(north, rs => {
                                     console.log(rs);
                                     // console.log(rs.addressComponents.street);
                                 });*/

                                /*geoc.getLocation(south, rs => {
                                    console.log(rs);
                                    // console.log(rs.addressComponents.street);
                                });

                                geoc.getLocation(west, rs => {
                                    console.log(rs);
                                    // console.log(rs.addressComponents.street);
                                });

                                geoc.getLocation(east, rs => {
                                    console.log(rs);
                                    // console.log(rs.addressComponents.street);
                                });*/


                                /*const marker = new BMap.Marker(center);
                                map.addOverlay(marker);

                                const northMarker = new BMap.Marker(north);
                                map.addOverlay(northMarker);

                                const southMarker = new BMap.Marker(south);
                                map.addOverlay(southMarker);

                                const westMarker = new BMap.Marker(west);
                                map.addOverlay(westMarker);

                                const eastMarker = new BMap.Marker(east);
                                map.addOverlay(eastMarker);*/

                                // let arrStr = getNewPoints(geoObj.points, halfX, halfY, 50);
                                // console.log(arrStr);
                                //边界点
                                // let points = coordinateToPoints(map, geoObj.points);
                                // preventionArea(community);  // 防范区
                                // sealedArea(geoObj.points, 50);  // 管控区
                                // console.log(geoObj.points);
                                controlArea(geoObj.points); // 封控区
                            }
                        });
                    }
                }
            });
        };


        let getNewPoints = (points, halfX, halfY, metre) => {
            return points.split(';').map(item => {
                return item.split(',').map((coordinate, index) => {
                    if (index === 0) { // x
                        if (Number(coordinate) >= halfX) {
                            return Number(coordinate) + metre;
                        } else {
                            return Number(coordinate) - metre;
                        }
                    } else { // y
                        if (Number(coordinate) >= halfY) {
                            return Number(coordinate) + metre;
                        } else {
                            return Number(coordinate) - metre;
                        }
                    }
                }).toString();
            }).reduce((pre, cur, index, arr) => {
                if (index === arr.length - 1) {
                    return pre + cur;
                } else {
                    return pre + cur + ';';
                }
            }, '');
        };

        let controlArea = (points) => {
            const bPoints = points.split(/;/).map(item => {
                const [lng, lat] = gcoord.transform([Number(item.split(',')[0]), Number(item.split(',')[1])], gcoord.BD09MC, gcoord.BD09);
                return new BMap.Point(lng, lat);
            });

            let ply = new BMap.Polygon(bPoints, {
                strokeWeight: 2,
                strokeColor: '#F01B2D',
                strokeOpacity: 0.9,
                fillColor: 'rgba(255,235,204,0.37)'
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
            map.setViewport(ply.getPath()); //调整视野
            map.setZoom(18);
        };

        let sealedArea = (points, metre) => {
            const {halfX, halfY} = getCenterCoordinate(points);
            let ply = new BMap.Polygon(coordinateToPoints(map, getNewPoints(points, halfX, halfY, metre)), {
                strokeWeight: 2,
                strokeColor: '#1c5eef',
                strokeOpacity: 0.9,
                fillColor: '#add6f1'
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
        };

        let preventionArea = (points) => {
            const {halfX, halfY} = getCenterCoordinate(points);
            let ply = new BMap.Polygon(coordinateToPoints(map, points), {
                strokeWeight: 2,
                strokeColor: '#047f20',
                strokeOpacity: 0.9,
                fillColor: 'rgba(174,250,175,0.38)'
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
        };

        let drawRoadMethod = (wd) => {
            drawRoad(wd, (data) => {
                const formatPoints = parseGeo(data.content[0]['profile_geo']).points.map(item => {
                    return item.split(';');
                }).map(item => {
                    return item.map(point => {
                        return gcoord.transform([Number(point.split(',')[0]), Number(point.split(',')[1])], gcoord.BD09MC, gcoord.BD09);
                    });
                });

                console.log(formatPoints.slice(0, 3));

                const points = formatPoints.slice(0, 10).map(list => {
                    return list.map(item => {
                        return new BMap.Point(item[0], item[1]);
                    });
                });

                points.forEach(list => {
                    const polyline = new BMap.Polyline(list, {
                        stroke: 'blue',
                        strokeWeight: 3,
                        strokeOpacity: 1
                    });
                    map.addOverlay(polyline);
                });
            });
        };


        const drawAreaMethod = () => {
            $('#areaId').val().split(',').forEach(item => {
                showArea($('#cityId').val(), item);
            });
        };

        drawAreaMethod();

        $('#showBtn').click(function () {
            map.clearOverlays();
            drawAreaMethod();
        });
    });
</script>
</body>
</html>